<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Product</title>

<link href="styles/formStyles/structure.css" rel="stylesheet">
<link href="styles/formStyles/form.css" rel="stylesheet">
<link href="styles/formStyles/theme.css" rel="stylesheet">
<style type="text/css">
.error
{
 color: red !important;
 font-weight: bold;
}
</style>


<script src="js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common/submitform.js" type="text/javascript"></script>
<script language="JavaScript">
	function showPrices()
	{
		var productCat = $("#productCat").val();
		if((productCat == 1) || (productCat == 4))
		{
			document.getElementById("multipricing").style.display = '';
			document.getElementById("singlepricing").style.display = 'none';
		}
		else
		{
			document.getElementById("multipricing").style.display = 'none';
			document.getElementById("singlepricing").style.display = '';
		}
	}
	function Validate(){
		  var image =document.getElementById("file").value;
		  if(image!=''){
			var checkimg = image.toLowerCase();
			if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
			 alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
			 document.getElementById("file").focus();
			 return false;
			}
		  }
		  return true;
		 }

	$(document).ready(function(){
		showPrices();
		});

</script>
</head>
<body id="public">
	<div id="container" class="ltr" style="padding-top: 50px;">
		<form:form cssClass="wufoo leftLabel page" action="" method="post" commandName="itemDetails" onsubmit="return Validate();" enctype="multipart/form-data">
			<div class="info" >
				<c:choose>
					<c:when test="${edit}">
						<h2>Edit Item</h2>
						<div>Please edit Item here!</div>
					</c:when>
					<c:otherwise>
						<h2>Add Item</h2>
						<div>Please add Item here!</div>
					</c:otherwise>
				</c:choose>
			</div>
			
			<ul>
			<form:hidden path="id"/>
			 <ul>
				<li class="notranslate">
					<label class="desc">
						<spring:message code="product.name" /> 
						<span class="req">*</span>
					</label>
					<div>
						<form:input id="name" path="name"  cssClass="field text medium" maxlength="20" />
					</div>
					<div><form:errors path="name" cssClass="error" /></div>
				</li>
			</ul>
			
			
			<ul>
				<li class="notranslate">
					<label class="desc">
						Description
					</label>
					<div>
						<form:textarea path="description"/>
					</div>
					<div><form:errors path="description" cssClass="error" /></div>
				</li>
			</ul>
			
			<ul>
				<li class="notranslate">
					<label class="desc">
						<spring:message code="product.category" /> 
						<span class="req">*</span>
					</label>
					<div>
						<form:select cssClass="field select medium"  path="categoryId" id="productCat" onchange="showPrices();">
							<form:option value="" label="--- Select ---"></form:option>
							<form:options  items="${categories}" itemValue="id" itemLabel="name" />
						</form:select>
					</div>
					<div><form:errors path="categoryId" cssClass="error" /></div>
				</li>
			</ul>
			
			<ul>
				<li class="notranslate">
					<label class="desc">
						<spring:message code="product.type" /> 
						<span class="req">*</span>
					</label>
					<div>
						<form:select cssClass="field select medium"  path="classificationId">
							<form:option value="" label="--- Select ---"></form:option>
							<form:options  items="${productTypes}" itemValue="id" itemLabel="name" />
						</form:select>
					</div>
					<div><form:errors path="classificationId" cssClass="error" /></div>
				</li>
			</ul>
			
			<ul>
				<li class="notranslate">
					<label class="desc">
						<spring:message code="product.taste" /> 
						<span class="req">*</span>
					</label>
					<div>
						<form:select cssClass="field select medium"  path="tasteId">
							<form:option value="" label="--- Select ---"></form:option>
							<form:options  items="${tastes}" itemValue="id" itemLabel="tname" />
						</form:select>
					</div>
					<div><form:errors path="tasteId" cssClass="error" /></div>
				</li>
			</ul>
			<ul id="multipricing" style="display: none;">
				<c:forEach items="${serves}" var="serve" varStatus="status">
					<li class="notranslate">
						<label class="desc">
							${serve.base} Price
							<span class="req">*</span>
						</label>
					</li>
					<div>
						<form:input id= "${serve.base}_price" path="prices[${status.count-1}].price" cssClass="field text medium" maxlength="4"/>
					</div>
					<div><form:errors path="prices[${status.count-1}].price" cssClass="error" /></div>
				</c:forEach>
			</ul>
			<ul id="singlepricing">
				<li class="notranslate">
					<label class="desc">
							Price
							<span class="req">*</span>
					</label>
				</li>
				<div>
					<form:input id="singlePrice" path="singlePrice" cssClass="field text medium" maxlength="4"/>
					<div><form:errors path="singlePrice" cssClass="error" /></div>
				</div>
			</ul>
			
		
			<ul>
				<li class="notranslate">
					<label class="desc">
						<spring:message code="product.image" /> 
						<span class="req">*</span>
					</label>
					<div>
						<input type="file" name="file" id="file" />
					</div>
					<div><form:errors path="file" cssClass="error" /></div>
				</li>
			</ul>
			
			<li class="buttons ">
				<div>
					<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"/>
				</div>
				<div>
					<input id="cancel" name="cancel" class="btTxt submit" type="button" value="Cancel" onclick="submitUrl('productList.action')"/>
				</div>
			</li>
			
		</ul>
		
		</form:form>
	</div>
	<div>
	<img src="${itemDetails.image}" alt="Upload Image" />
	</div>
</body>
</html>